<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus ? 'success' : ''">
      <div class="progress" :style="{ width: disX + 'px'}"></div>
      <i
        @mousedown="rangeMove"
        :class="rangeStatus ? successIcon : startIcon"
      ></i>
      <span class="text">{{ rangeStatus ? successText : startText }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'slideRangLt',
  props: {
    // 成功之后的函数
    successFun: {
      type: Function,
    },
    //成功图标
    successIcon: {
      type: String,
      default: 'el-icon-success',
    },
    //成功文字
    successText: {
      type: String,
      default: '验证成功',
    },
    //开始的图标
    startIcon: {
      type: String,
      default: 'el-icon-d-arrow-right',
    },
    //开始的文字
    startText: {
      type: String,
      default: '请拖拽滑块到最右边',
    },
    //失败之后的函数
    errorFun: {
      type: Function,
    },
    //或者用值来进行监听
    status: {
      type: String,
    },
  },
  data() {
    return {
      disX: 0,
      rangeStatus: '',
    }
  },
  methods: {
    rangeMove(e) {
      let ele = e.target
      let startX = e.clientX
      let eleWidth = ele.offsetWidth
      let parentWidth = ele.parentElement.offsetWidth
      let MaxX = parentWidth - eleWidth
      document.onmousemove = (e) => {
        let endX = e.clientX
        this.disX = endX - startX
        if (this.disX <= 0) {
          this.disX = 0
        }
        if (this.disX >= MaxX - eleWidth) {
          //减去滑块的宽度,体验效果更好
          this.disX = MaxX
        }
        ele.style.transition = '.1s all'
        ele.style.transform = 'translateX(' + this.disX + 'px)'
        e.preventDefault()
      }
      document.onmouseup = () => {
        if (this.disX !== MaxX) {
          ele.style.transition = '.5s all'
          ele.style.transform = 'translateX(0)'
          //执行成功的函数
          this.errorFun && this.errorFun(() => {
            this.rangeStatus = false
            ele.style.transform = 'translateX(0)'
            this.disX = 0
          })
        } else {
          this.rangeStatus = true
          if (this.status) {
            this.$parent[this.status] = true
          }
          //执行成功的函数
          this.successFun && this.successFun(() => {
            this.rangeStatus = false
            ele.style.transform = 'translateX(0)'
            this.disX = 0
          })
        }
        document.onmousemove = null
        document.onmouseup = null
      }
    },
  },
}
</script>
<style scoped>
.jc-range {
  background-color: #599cffff;
  position: relative;
  transition: 1s all;
  user-select: none;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px; /*no*/
  border-radius: 3px;
  font-size: 14px;
}
.jc-range .text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #666666;
}
.jc-range .progress {
  position: absolute;
  left: 0;
  width: 40px; /*no*/
  height: 40px;
  background-color: #7ac23c;
  z-index: 1;
}
.jc-range i {
  z-index: 3;
  position: absolute;
  left: 0;
  width: 40px; /*no*/
  height: 40px;
  color: #919191;
  background-color: #fff;
  border: 1px solid #bbb;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
}
.jc-range.success {
  background-color: #7ac23c;
  color: #fff;
}
.jc-range.success i {
  color: #7ac23c;
}
</style>
